<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-item">
            <div class="statistics-title">今日销售额</div>
            <div class="statistics-value">¥{{ todaySales }}</div>
            <div class="statistics-compare">
              较昨日
              <span :class="todayCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(todayCompare) }}%
                <i :class="todayCompare >= 0 ? 'el-icon-top' : 'el-icon-bottom'" />
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-item">
            <div class="statistics-title">本月销售额</div>
            <div class="statistics-value">¥{{ monthSales }}</div>
            <div class="statistics-compare">
              较上月
              <span :class="monthCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(monthCompare) }}%
                <i :class="monthCompare >= 0 ? 'el-icon-top' : 'el-icon-bottom'" />
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-item">
            <div class="statistics-title">今日订单数</div>
            <div class="statistics-value">{{ todayOrders }}</div>
            <div class="statistics-compare">
              较昨日
              <span :class="todayOrdersCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(todayOrdersCompare) }}%
                <i :class="todayOrdersCompare >= 0 ? 'el-icon-top' : 'el-icon-bottom'" />
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-item">
            <div class="statistics-title">本月订单数</div>
            <div class="statistics-value">{{ monthOrders }}</div>
            <div class="statistics-compare">
              较上月
              <span :class="monthOrdersCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(monthOrdersCompare) }}%
                <i :class="monthOrdersCompare >= 0 ? 'el-icon-top' : 'el-icon-bottom'" />
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>销售趋势</span>
            <el-radio-group v-model="trendType" size="small" style="float: right">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <div ref="salesTrendChart" style="width: 100%; height: 350px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>商品分类销售占比</span>
          </div>
          <div class="chart-container">
            <div ref="categoryPieChart" style="width: 100%; height: 350px" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>热销商品排行</span>
          </div>
          <el-table :data="hotProducts" style="width: 100%" border>
            <el-table-column type="index" label="排名" width="80" align="center" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="category" label="分类" width="120" />
            <el-table-column prop="sales" label="销量" width="120" align="center" />
            <el-table-column prop="amount" label="销售额" width="120" align="center">
              <template slot-scope="scope">
                ¥{{ scope.row.amount }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSalesStatistics } from '@/api/sales'

export default {
  name: 'SalesStatistics',
  data() {
    return {
      todaySales: 0,
      todayCompare: 0,
      monthSales: 0,
      monthCompare: 0,
      todayOrders: 0,
      todayOrdersCompare: 0,
      monthOrders: 0,
      monthOrdersCompare: 0,
      trendType: 'week',
      hotProducts: [],
      salesTrendChart: null,
      categoryPieChart: null
    }
  },
  watch: {
    trendType() {
      this.initSalesTrendChart()
    }
  },
  mounted() {
    this.getStatistics()
    this.initCharts()
  },
  beforeDestroy() {
    if (this.salesTrendChart) {
      this.salesTrendChart.dispose()
    }
    if (this.categoryPieChart) {
      this.categoryPieChart.dispose()
    }
  },
  methods: {
    async getStatistics() {
      try {
        const { data } = await getSalesStatistics()
        this.todaySales = data.todaySales
        this.todayCompare = data.todayCompare
        this.monthSales = data.monthSales
        this.monthCompare = data.monthCompare
        this.todayOrders = data.todayOrders
        this.todayOrdersCompare = data.todayOrdersCompare
        this.monthOrders = data.monthOrders
        this.monthOrdersCompare = data.monthOrdersCompare
        this.hotProducts = data.hotProducts
        this.initCharts()
      } catch (error) {
        console.error('获取销售统计数据失败:', error)
      }
    },
    initCharts() {
      this.initSalesTrendChart()
      this.initCategoryPieChart()
    },
    initSalesTrendChart() {
      if (!this.salesTrendChart) {
        this.salesTrendChart = echarts.init(this.$refs.salesTrendChart)
      }

      // 模拟数据，实际应该从API获取
      const dates = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      const sales = [12000, 15000, 18000, 14000, 16000, 20000, 22000]
      const orders = [120, 150, 180, 140, 160, 200, 220]

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['销售额', '订单数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates
        },
        yAxis: [
          {
            type: 'value',
            name: '销售额',
            axisLabel: {
              formatter: '¥{value}'
            }
          },
          {
            type: 'value',
            name: '订单数',
            position: 'right'
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'line',
            smooth: true,
            data: sales,
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '订单数',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: orders,
            itemStyle: {
              color: '#67C23A'
            }
          }
        ]
      }

      this.salesTrendChart.setOption(option)
    },
    initCategoryPieChart() {
      if (!this.categoryPieChart) {
        this.categoryPieChart = echarts.init(this.$refs.categoryPieChart)
      }

      // 模拟数据，实际应该从API获取
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['食品', '饮料', '日用品', '电子产品', '其他']
        },
        series: [
          {
            name: '销售占比',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '食品' },
              { value: 310, name: '饮料' },
              { value: 234, name: '日用品' },
              { value: 135, name: '电子产品' },
              { value: 148, name: '其他' }
            ]
          }
        ]
      }

      this.categoryPieChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .statistics-card {
    .statistics-item {
      text-align: center;
      padding: 20px 0;

      .statistics-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 10px;
      }

      .statistics-value {
        font-size: 24px;
        color: #303133;
        margin-bottom: 10px;
      }

      .statistics-compare {
        font-size: 12px;
        color: #909399;

        .up {
          color: #67C23A;
        }

        .down {
          color: #F56C6C;
        }
      }
    }
  }

  .chart-container {
    position: relative;
    width: 100%;
    height: 350px;
  }
}
</style> 